<template>
  <a-row class="to_doTask panel_box">
    <p class="title">待办任务</p>
    <a-col :span="24" :lg="24">
      <ul class="to_doTask_list">
        <li v-for="(item, index) in list" :key="index">
          <div class="department">{{ item.industry }}</div>
          <div class="name">{{ item.task }}</div>
          <div class="date">{{ item.createTime }}</div>
          <div class="icon">
            <i class="iconfont icon-zhedie"></i>
          </div>
        </li>
      </ul>
    </a-col>
  </a-row>
</template>

<script>
import { getUpComing } from "@/api/api.js";
export default {
  name: "ToDoTask",
  data() {
    return {
      list: [
        {
          department: "发电部门",
          name: "2023年02月待填报任务已生成",
          date: "2023年04月 14:02:07",
        },
        {
          department: "发电部门",
          name: "2023年02月待填报任务已生成",
          date: "2023年04月 14:02:07",
        },
        {
          department: "发电部门",
          name: "2023年02月待填报任务已生成",
          date: "2023年04月 14:02:07",
        },
        {
          department: "发电部门",
          name: "2023年02月待填报任务已生成",
          date: "2023年04月 14:02:07",
        },
        {
          department: "发电部门",
          name: "2023年02月待填报任务已生成",
          date: "2023年04月 14:02:07",
        },
        {
          department: "发电部门",
          name: "2023年02月待填报任务已生成",
          date: "2023年04月 14:02:07",
        },
      ],
    };
  },
  mounted() {
    getUpComing().then((res) => {
      this.list = res.result;
    });
  },
};
</script>

<style lang="scss">
.title {
  display: flex;
  font-size: 14px;
  font-weight: 600;
}
.panel_box {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
.to_doTask {
  margin-bottom: 5px;
  .to_doTask_list {
    display: flex;
    flex-direction: column;

    li:nth-child(odd):before {
      width: 3px;
      height: 100%;
      // border: 1px;
      background: #689ceb;
      content: "";
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    li:nth-child(even):before {
      width: 3px;
      height: 100%;
      // border: 1px;
      background: #43c9c5;
      content: "";
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    li {

      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #f8f8f8;
      height: 40px;
      line-height: 40px;
      font-size: 14px;

      .department {
        width: 120px;
      }
      .name {
        flex: 1;
      }
      .date {
        width: 200px;
      }
      .icon {
        color: #689ceb;
      }
    }
  }
}
</style>